<template>
    <div id="detail-algorithm-model-device-bind">
        <el-dialog
            title="算法模型设备绑定关系详情"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="65%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <div v-loading="loading">
                <el-descriptions :column="2" size="large" border>
                <el-descriptions-item label="算法ID" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.n_AlgorithmId}}
                </el-descriptions-item>
                <el-descriptions-item label="算法名称" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_AlgorithmName}}
                </el-descriptions-item>
                <el-descriptions-item label="算法库名称" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_AlgorithmLibName}}
                </el-descriptions-item>
                <el-descriptions-item label="算法方法名称" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_AlgorithmMethodName}}
                </el-descriptions-item>

                <el-descriptions-item label="算法类型" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_AlgorithmType}}
                </el-descriptions-item>

                <el-descriptions-item label="算法版本" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    <el-tag size="small">{{item.n_AlgorithmVersion}}</el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="模型ID" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.n_ModelId}}
                </el-descriptions-item>
                <el-descriptions-item label="模型名称" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_ModelName}}
                </el-descriptions-item>
                <el-descriptions-item label="模型版本" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    <el-tag size="small">{{item.n_ModelVersion}}</el-tag>
                </el-descriptions-item>
                
                <el-descriptions-item label="设备ID" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.n_DeviceId}}
                </el-descriptions-item>
                <el-descriptions-item label="设备编码" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_DeviceCode}}
                </el-descriptions-item>
                <el-descriptions-item label="设备名称" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    {{ item.v_DeviceName}}
                </el-descriptions-item>
                <el-descriptions-item label="设备类型" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                    <el-tag size="small" v-if="item.n_DeviceType === 0"> 【设备类型：摄像头】 </el-tag>
                    <el-tag size="small" v-else-if="item.n_DeviceType === 1"> 【设备类型：安全帽】 </el-tag>
                    <el-tag size="small" v-else-if="item.n_DeviceType === 2"> 【设备类型：无人机】 </el-tag>
                    <el-tag size="small" v-else> 【设备类型：未知】 </el-tag>
                </el-descriptions-item>
            </el-descriptions>
            </div>
            <template #footer>
                <el-button @click="handleClose">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { ElButton, ElDialog, ElDescriptions, ElDescriptionsItem, ElMessageBox, ElMessage } from 'element-plus'
import { Get } from '/@/api/its/algorithm-model-device-bind'
import { ItemType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'detail-algorithm-model-device-bind',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object as () => ItemType,
            default: null,
        }
    },
    setup(props,ctx){

        const loading = ref(false)
        const item:any = ref({})
        
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        //获取详情
        const getDetail = async () => {
            try {
                loading.value = true
                let res = await Get({id: props.item.n_Id})
                if (res && res.data) {
                    item.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }finally {
                loading.value = false
            }
        }

        onMounted(async () => {
            await getDetail()
        })

        return {
            handleClose,
            loading,
            item,
        }
    },
} )
</script>
<style scoped lang="scss">
#detail-algorithm-model-device-bind{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
    .bind-item {
        display: flex;
        flex-direction: column;
        align-items:flex-start;
    }
}
</style>